<template>
	<view class="chat_page">
		<view class="chat_top">
			<cat-page></cat-page>
			<view class="chat_title">
				哥哥想替过世妹妹看周杰伦演唱会，出示死亡证明后仍遭拒，大麦致歉「已免费退票」，哪些信息值得关注？
			</view>
			<view class="content_process">
				<div @click="reduceAnger()">
					降降火
				</div>
				<div @click="increaseAnger()">
					添材火
				</div>
				<view>
					<slider :value="angerNum" :class="angerNum > 50 ? 'anger_slider' : 'happy_slider'" min="0" max="100" disabled show-value />
				</view>
			</view>
		</view>
		
		<view class="chat_content">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
			<view class="scroll-view-item" :class="item.userType == 1 ? 'ai_chat' : 'user_chat'" v-for="(item,index) in chatList">
				<view class="chat_msg_box">
					<image v-if="item.userType == 1" style="width: 40px;height: 40px;" src="../../static/chat/ai-photo.png" mode="aspectFit"></image>
					
					<span class="chat_msg_content">
						{{item.msg}}
					</span>
					<image v-if="item.userType !== 1"  style="width: 40px;height: 40px;" src="../../static/chat/dog.png" mode="aspectFit"></image>
					
				</view>
			</view>
			</scroll-view>
		</view>
	
	
		<view class="chat_bottom">
			<textarea @blur="bindTextAreaBlur" auto-height />
			<image src="../../static/chat/send.png" mode="aspectFit"></image>
			
		</view>
	</view>
</template>

<script>
	import catPage from '../component/catList.vue'
	export default {
		components:{catPage},
		data() {
			return {
				title: 'Hello',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				angerNum:40,
				chatList:[{
					msg:'哼哼哼！',
					userType:1,
					status:1,
					statusNum:0,
				},{
					msg:'每个看似“刻板规定”的背后，都有着离谱的经验',
					userType:2,
					status:0,
					statusNum:0,
				},{
					msg:'这种需求也不是说不可能办到！',
					userType:1,
					status:2,
					statusNum:-10,
				},{
					msg:'很多人可能觉得为什么这么麻烦，客服不能变通一下帮助这个特例么？！',
					userType:2,
					status:1,
					statusNum:0,
				},{
					msg:'那你为什么不自己去做呢！',
					userType:1,
					status:2,
					statusNum:-10,
				},{
					msg:'很多人可能觉得为什么这么麻烦，客服不能变通一下帮助这个特例么？！',
					userType:2,
					status:1,
					statusNum:0,
				},{
					msg:'那你为什么不自己去做呢！',
					userType:1,
					status:2,
					statusNum:-10,
				},]
			}
		},
		onLoad() {
			// this.msgList = this.cardData
			console.log('onload')
			// document.getElementsByClassName('chat_content')[0].style.height = '400rpx'
			// console.log(document.getElementsByClassName('chat_content'))			
			// console.log(document.getElementsByClassName('chat_bottom').offsetHeight)

		},
		methods: {
			//横向滚动
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			reduceAnger: function(){
				this.angerNum < 1 ? '' : this.angerNum -= 10
			},
			increaseAnger: function(){
				this.angerNum < 100 ? this.angerNum += 10 : ''
			},
			bindTextAreaBlur: function (e) {
				console.log(e.detail.value)
			}
		},
		mounted() {
			uni.createSelectorQuery().select('.chat_bottom').boundingClientRect(data => {
					console.log(data)
		  }).exec();
		}
	}
</script>

<style>
	.chat_page {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background-image: url('../../static/index/home-bg.jpeg');
		background-repeat: repeat-y;
	}
	uni-page-body{
		height: 100%;
	}
	.chat_top{
		width:calc(100% - 40rpx);
		height: auto;
		padding: 20rpx;
		background-color: #F4F3F6;
		border-radius: 0 0 100rpx 0;
		margin-bottom: 40rpx;
	}
	.content_process{
		width:100%;
		height: auto;
		padding-top: 10px;
	}
	.chat_page .anger_slider .uni-slider-handle{
		background-image: url('../../static/chat/anger1.png');
		background-size: cover;
		border-radius: 0;
	}
	.chat_page .anger_slider .uni-slider-thumb{
		background-color: transparent;
		opacity: 0;
		background-image: url('../../static/chat/anger1.png');
		background-size: cover;
	}
	.chat_page .uni-slider-handle-wrapper{
		height: 20rpx;
	}
	.chat_page .uni-slider-track{
		background: linear-gradient(-30deg, rgb(107, 175, 240), rgb(245, 137, 227));	
	}
	.chat_page .happy_slider .uni-slider-handle-wrapper .uni-slider-handle{
		background-image: url('../../static/chat/happy.png');
		background-size: cover;
		border-radius: 0;
	}
	.chat_page .happy_slider .uni-slider-handle-wrapper .uni-slider-thumb{
		background-color: transparent;
		opacity: 0;
		background-image: url('../../static/chat/happy.png');
		background-size: cover;
	}
	
	.chat_content{
		height: auto;
		/* height: calc(100% - 400rpx); */
	}
	.scroll-Y{
		height: 100%;
		padding-left: 30rpx;
		/* background-image: url('../../static/index/home-bg.jpeg'); */
		background-repeat: repeat-y;
	}
	
	.scroll-view-item {
		height: auto;
		max-height: 300rpx;
		width: calc(100% - 60rpx);
		float: left;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
		border-radius: 40rpx;
	}
	.chat_msg_box{
		width: 100%;
		display: flex;
	}
	.chat_msg_content{
		border-radius: 30rpx;
		padding: 20rpx;
		display: inline-block;
		/* width: calc(100% - 120rpx); */
	}
	.ai_chat .chat_msg_box{
		justify-content: flex-start;
	}
	.ai_chat .chat_msg_box uni-image{
		justify-content: flex-start;
		margin-right: 20rpx;
	}
	.scroll-view-item .chat_msg_content{
		height: auto;
		width: auto;
		max-width: calc(100% - 130rpx);
	}
	.ai_chat .chat_msg_content{
		background-color: #F4F3F6;
	}
	.user_chat .chat_msg_box{
		justify-content: flex-end;
	}
	.user_chat .chat_msg_box uni-image{
		justify-content: flex-end;
		width: 40px;
	}
	.user_chat .chat_msg_content{
		color: #F4F3F6;
		background: linear-gradient(-30deg, rgb(107, 175, 240), rgb(245, 137, 227));
	}
	.user_chat .chat_msg_box uni-image{
		justify-content: flex-end;
		margin-left: 20rpx;
	}
	
	.chat_bottom{
		position: absolute;
		width:calc(100% - 70rpx);
		bottom: 0;
		padding-left: 30rpx;
		padding-right: 30rpx;
		height: auto;
		/* background-color: red; */
		display: flex;
		justify-content: flex-start;
	}
	.chat_bottom uni-textarea{
		min-height: 80rpx;
		background-color: #F4F3F6;
		border-radius: 20rpx;	
		/* padding-right: 100rpx; */
		width: calc(100% - 30rpx);
		padding: 15rpx;
		padding-right: 80rpx;
	}
	.chat_bottom uni-image{
		height: 100%;
		line-height: 100rpx;
		width: 80rpx;
		position: absolute;
		right: 20rpx;
		bottom: 10rpx;
	}
</style>
